<template>
  <div class="wi_chart">
    <v-chart @magictypechanged="magictypechanged" :group="group" :option="myOptions" autoresize ref="scadaline"/>
  </div>
</template>

<script>
// import Echarts from 'vue-echarts';
// import 'echarts/lib/chart/line';
// import 'echarts/lib/component/tooltip';
// import 'echarts';
import VChart from "vue-echarts";
export default {
  components:{
    VChart,
  },
  data() {
    return {
      myChart: null,
      myOptions:null,
    }
  },
  props: {
    options: Object,
    group: {
      type:String,
      default:"group",
    },
  },
  watch: {
    options(newVal){
      console.log(this.options,"asfasdfad")
      this.myOptions = newVal
    }
  },
  mounted() {
    console.log(this.options,"asfasdfad")
    this.myOptions = this.options
  },
  methods: {
    refreshData(data) {
      this.$refs.scadaline.mergeOptions({
        series: [{
          data: data
        }]
      });
    },
    clearChart() {
      this.$refs.scadaline.clear();
    },
    getInstance(){
      return this.$refs.scadaline
    },
    magictypechanged(item){
      // // this.clearChart();
      // console.log(this.$refs.scadaline)
      // this.$refs.scadaline.refresh()

     //
      let options = this.$refs.scadaline.options
      let beforeType = options.series[0].type;
     if(item.currentType === "bar"){
       if(beforeType === "bar"){
         return false;
       }
       options.series.forEach(obj=>{
         obj.type = "bar"
       })
       this.clearChart();
       this.myOptions = options;
     }else{
       if(beforeType === "line"){
         return false;
       }
       options.series.forEach(obj=>{
         obj.type = "line"
       })
       this.clearChart();
       this.myOptions = options;
     }
    }
  },
}
</script>

<style lang="scss" scoped>
.wi_chart {
  width: 100%;
  height: 100%;
}

.echarts {
  width: 100%;
  height: 100%;
}
</style>
